<!-- 问题文章里的左边回答区域 组件 -->
<template>
  <div id="articleAnswer">
    <!-- 更多答案点击框 -->
    <div class="more_answer" v-if="!isOpen" @click="isOpen=!isOpen">查看全部 {{ answerList.length }} 个答案</div>
    <!-- 回答框区域 -->
    <div class="answer_box" :style="{'margin-top':isOpen?'0px':none}">
      <!-- 一个回答框 -->
      <AnswerCard v-show="!isOpen" :list="answerList[0]"></AnswerCard>
      <!-- 全部回答框 -->
      <AnswerCard v-show="isOpen" v-for="(i, index) of answerList" :key="index" :list="i"></AnswerCard>
    </div>
  </div>
</template>

<script>
import AnswerCard from './answerCard/AnswerCard'
export default {
  name: 'articleAnswer',
  components: {
    'AnswerCard': AnswerCard
  },
  props: ['questionId'],
  data () {
    return {
      isOpen: false,
      answerList: []
    }
  },
  computed: {
  },
  methods: {
  },
  created () {
    // 通过问题id获取对应所有回答
    this.axios.get('/api/getAllAnswerByQuestionId', {
      params: {
        id: this.questionId
      }
    })
      .then((response) => {
        this.answerList = response.data.data
        console.log(response)
      })
      .catch((error) => {
        this.$Notice.error({
          title: '通知',
          desc: '接口，异常！'
        })
        console.info(error)
      })
  }
}
</script>

<style scoped>
  @import '../../../../../static/css/article/ArticleAnswer.css';
</style>
